<!--
 * @Date: 2022-01-19 19:25:17
 * @LastEditTime: 2023-05-17 10:37:13
-->
<template>
  <div class="article-container">
    <!-- 导航栏 -->
    <van-nav-bar
      title="科普详情"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- /导航栏 -->

    <div class="main-wrap markdown-body">
        <div class="preface">
            <h3>前言</h3>
            <van-divider />
            <div class="pre-content">{{articleList[index].name}}</div>
        </div>
        <div class="text">
            <h3>正文</h3>
            <van-divider />
            <div class="text-content">
                <div class="material">原料: {{articleList[index].material}}</div>
                <div class="degree">度数: {{articleList[index].degree}}</div>
                <div class="taste" v-html="articleList[index].taste"></div>
                <div class="img">
                    <van-image contain :src="articleList[index].art_img"></van-image>
                </div>
                <div class="step" v-html="articleList[index].step">
                </div>
                <div class="video" v-if="articleList[index].video">
                  <video controls :src="articleList[index].video"></video>
                </div>
            </div>
        </div>

    </div>
  </div>
</template>

<script>
// 引入markdown css文件
import "@/style/github-markdown.css";
export default {
  name: "ArticleIndex",
  data() {
    return {
        index: 0,
        articleList: [
            {
                id: '0001',
                name: '加里波第-Garibaldi的调制方法',
                material: '金巴利50ml、橙汁100ml',
                degree: 'xxx度',
                taste: '口味：<br>冰块都无法压制鲜榨橙汁的馥郁热情的香甜， <br> 金巴利的加入为其增添了一丝稳重却爽利的苦的同时，<br> 也使香气更加饱满大方。<br>据说名字来源于当年促进意大利南北统一的一个将军。<br>以为意大利南部产橙子，而金巴利产自北方。<br> 大名鼎鼎的金巴利橙汁，餐前开胃，<br>餐后消食，烤肉搭配……<br>是不是这个将军特别能肉呀',
                art_img: 'https://graduate-1309613071.cos.ap-shanghai.myqcloud.com/article/art_img001.jpg',
                step: '步骤：<br> 1. 冰块入杯八分满； <br> 2. 先倒橙汁，后倒金巴利； <br> 3. 吧匙沿杯壁搅拌15s左右；<br> 4. 半片橙片入杯装饰',
                video: 'https://graduate-1309613071.cos.ap-shanghai.myqcloud.com/article/low_alcohol.mp4'
            },
            {
                id: '0002',
                name: '闺蜜 - White Negroni的调制方法',
                material: '金酒 Gin、苏士酒 Suze、利莱白 Lillet Blanc',
                degree: 'xxx度',
                taste: '口味：<br>金酒雅致高冷的松子芬芳，被利莱白清丽甜美的葡萄香气勾兑出一丝温暖;<br>苏士酒馥郁的苹果香甜下，<br>龙胆草若隐若现的苦涩，如往昔岁月的磨砺;<br>终究活成了一份通透与美好;<br>在心底酿成了一份佳酿，与朋友分享。<br>White Negroni原名:“白色尼格罗尼”<br>男人老友有杯酒叫“Old pal-老友”，更粗粉豪放一些;<br>这杯酒叫“闺蜜”吧，因为，有沉淀、有度数、有甜美、却不讨好;<br>清丽甜美依然，再见多了一份醇厚...',
                art_img: 'https://graduate-1309613071.cos.ap-shanghai.myqcloud.com/article/art_img0002.jpg',
                step: '步骤：<br> 1. 大方冰放入古典杯； <br> 2. 所有酒品倒入杯中； <br> 3. 吧匙沿杯壁搅拌15s左右；<br> 4. 可用柠皮熏杯后置入杯中，做装饰',
                video: 'https://graduate-1309613071.cos.ap-shanghai.myqcloud.com/article/low_alcohol.mp4'
            },
            {
                id: '0003',
                name: '微醺气泡果冻酒',
                material: '酒果冻',
                degree: 'xxx度',
                taste: '有3种口味，白沙桃瓦，励志柠檬沙瓦，葡萄桑格利亚',
                art_img: 'https://graduate-1309613071.cos.ap-shanghai.myqcloud.com/article/art_img01.jpg',
                video: 'https://graduate-1309613071.cos.ap-shanghai.myqcloud.com/article/low_alcohol.mp4'
            },
        ]
    };
  },
  watch: {
    "$route.params.articleId"(newVal, oldVal) {
      if (newVal) {
        console.log(newVal);
        this.index = this.$route.params.articleId
      }
    }
  },
  created() {
    this.index = this.$route.params.articleId
  },
  methods: {
    getData() {
      // const {result} = this.getDataAPI(articleId)
    }
  }
};
</script>

<style scoped lang="less">
.van-nav-bar {
  background-color: #07c160;
  margin-bottom: 10px;
  ::v-deep .van-nav-bar__title  {
    color: white;
    font-weight: 700;
  }
}
.article-container {
    padding-bottom: 60px;
  /deep/.van-nav-bar {
    .van-icon {
      color: #fff;
    }
  }
  .preface {
    text-align: left;
    padding-left: 10px;
    .pre-time {
        color: red;
    }
  }
  .text {
    margin-top: 30px;
    text-align: left;
    padding: 0 10px;
  }
  .text-content div {
    margin-top: 15px;
  }
  .video {
    video {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
